import { Button } from "antd";
import { ExportOutlined, ImportOutlined, PlusSquareOutlined } from "@ant-design/icons";

interface TableComponentProps {
  children?: React.ReactNode;
  title: string;
  newAdd?: Function;
  importData?: Function;
  exportData: Function;
}

const TableComponent: React.FC<TableComponentProps> = ({ children, title, newAdd, importData, exportData }) => {
  return (
    <>
        <div
            style={{ 
                width: '100%', 
                height: '54px', 
                backgroundColor: '#ffffffff', 
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                padding: '0 0 0 20px',
                marginTop: '10px',
                borderBottom: '1px solid #e1e1e1',
            }}
        >
            <div style={{ display: 'flex' }}>
                <span style={{ fontWeight: '800', color: '#0958d9', marginRight: '6px' }}>|</span>
                <div style={{ padding: '2px', color: '#0958d9' }}>{ title }</div>
            </div>
            <div>
                <Button 
                    type="primary" 
                    style={{ margin: '0 10px 0 0' }} 
                    icon={<PlusSquareOutlined />}
                    onClick={() => newAdd && newAdd()}
                >
                    新 增
                </Button>

                <Button 
                    type="primary" 
                    style={{ margin: '0 10px 0 0' }} 
                    icon={<ImportOutlined />}
                    onClick={() => importData && importData()}
                >
                    导 入
                </Button>

                <Button 
                    style={{ margin: '0 20px 0 0' }} 
                    icon={<ExportOutlined />}
                    onClick={() => exportData && exportData()}
                >
                    导 出
                </Button>
            </div>
        </div>
        <div style={{ width: '100%', height: 'auto', backgroundColor: '#ffffffff', padding: '10px 20px 10px 20px' }}>
            { children }
        </div>
    </>
  );
};

export default TableComponent;